oldTable = false;

function creerTableClick(){
    
    var f = document.forms[0];
	var c = Number(f.col.value);
	var r = Number(f.row.value);
	var w = [];
	var h = [];
    var ckb_addButtons = document.getElementById('ckb_addButtons');
    
	console.log(c,r);
	
    var msg1 = "Col and row must be a number"; 
	var msg2 = "Width and height must be a number or list of numbers";
	var msg3 = "Col and row must be greater or egal at 1";
	var msg4 = "Width and height must be greater or egal at 1";
	
    if(isNaN(c) ){ // fucking NaN is't a number !@#$%^&*
        alert(msg1);
        console.log("Error: val col => ", c);
        return;
    }

    if(isNaN(r) ){
        alert(msg1);
        console.log("Error: val row => ", r);
        return;
    }

    if(c < 1 || r < 1){
	    alert(msg3);
	    return;
	}
	
    var sw = f.width.value;
    var sh = f.height.value;
    console.log(sw,sh);
    
    if(sw.indexOf(',') > 0){
        w = sw.split(',');
        // todo validate
    }
    else{
        sw = Number(sw);
        if(sw == 0){
            alert(msg4);
            return;
        }
        
        if (isNaN(sw)){
            alert(msg2);
            return;
        }
        for (var i = 0; i < c; i++){
            w.push(sw);
        }
    }
    if(sh.indexOf(',') > 0){
         h = sh.split(',');
         // todo validate
    }
    else{
        sh = Number(sh);
        if(sh == 0){
            alert(msg4);
            return;
        }
        
        if (isNaN(sh)){
            alert(msg2);
            return;
        }
        for (var i = 0; i < r; i++){
            h.push(sh);
        }
    }
    
	var table = creerTable(c,r, w, h);
	console.log(table);
	// make sure div tableCible is empty
	var divTableCible = document.getElementById('tableCible');
	
	if(oldTable)
	    divTableCible.removeChild(oldTable);
	    
	divTableCible.appendChild(table);
	oldTable = table;
    
    if(ckb_addButtons.checked){
        var tds = document.getElementsByTagName('td');
        console.log(tds);
        for(var i = 0, ln = tds.length; i < ln; i++){
            addButtons(tds[i]);
        }
    }
}

function table(){
    return document.createElement('table');
}

function tBody(){
    return document.createElement('tbody');
}

function tr(){
    return document.createElement('tr');
}

function td(width, height){
    var td = document.createElement('td');
    td.setAttribute('style', 'width:' + width.toString() + 'px; height:' + height.toString() + 'px;');
    return td;
}

function creerTable(col, row, width, height){
    var dSizeW = 100;
    var dSizeH = 30;
    var t = table();

    var isW = !!width.length;
    var isH = !!height.length;
    
    var tmp_tr;
    for (var j = 0; j < row; j++){
        tmp_tr = tr();
        for (var i = 0; i < col; i++){
        
            tmp_tr.appendChild( td( isW ? width[i] : dSizeW, isH ? height[j] : dSizeH ) );
            // tmp_tr.appendChild(td(50,25));
        }

        t.appendChild(tmp_tr);
    }

    return t;
}

function infoSize(e){
    var x = e.toElement.offsetLeft + e.toElement.offsetWidth;
    var y = e.toElement.offsetTop + e.toElement.offsetHeight;
    console.log(e.x, e.y, e, e.toElement, e.toElement.Y, e.toElement.offsetLeft, e.toElement.offsetTop, e.toElement.offsetWidth, e.toElement.offsetHeight);
    var info = document.getElementById('info');
    info.style.left = x;
    info.style.top = y;
}

function closeInfo(){
    var divInfo = document.getElementById('info');
    console.log(divInfo, divInfo.style.left);
    divInfo.style.left = '-10000px';
    divInfo.style.top = '-10000px';
}

function selectText(me){
    //me.focus();
    me.select();
    console.log(me);
    window.me = me;
}

function addButtons(that){
    // var t = tdocument.getElementById('tableCible');
    var btn = document.createElement('button');
    that.appendChild(btn);
}